<template>
    <div class="flex flex-col h-full bg-gray-100">
        <div class="w-full h-[70px] flex bg-blue-400">
            <div class="h-full flex min-w-[200px] justify-center items-center" :style="factoryContainerStyle">
                <div class="w-[169px] h-[55px] p-[5px] mt-[5px] mb-[5px] ml-[5px] text-white text-[13px] flex justify-center items-center"
                    v-if="!isClose">
                    {{ projectTitle }}
                </div>
                <div class="flex-1 h-[55px] m-[5px] flex justify-center items-center cursor-pointer"
                    :style="showSidebarStyle">
                    <el-icon @click="showSideBar">
                        <SvgIcon name="open" v-show="isShow"></SvgIcon>
                        <SvgIcon name="close2" v-show="isClose"></SvgIcon>
                    </el-icon>
                </div>
            </div>
            <div class="flex-1 h-full flex">
                <div
                    class="w-8/9 h-full flex justify-center items-center text-[30px] text-white font-semibold tracking-[15px]">
                    {{
                        activeTopMenuLabel
                    }}</div>
                <div class="flex-1 flex justify-end items-center p-3">
                    <div class="w-[40px] h-[40px] flex justify-center items-center cursor-pointer" @click="loginOut">
                        <SvgIcon name="close" :width="iconWidth" :height="iconHeight" color="white">
                        </SvgIcon>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full flex flex-1 overflow-hidden">
            <div class="relative bg-[#e3edf2] h-full transition-transform duration-300 ease-in-out overflow-auto">
                <SideBar :sideItem="sideItems" :isCollapse="isCollapse" />
            </div>
            <div class="flex-1 m-3 shadow-[0px_0px_12px_rgba(0,0,0,0.4)]">
                <router-view v-slot="{ Component }">
                    <keep-alive>
                        <component :is="Component" />
                    </keep-alive>
                </router-view>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import SideBar from './components/SiderBar.vue';
import { sideItems, projectTitle } from './config.ts'
import { formatDate } from '@/utils/format'
import { useRoute, useRouter } from 'vue-router';


const router = useRouter();
const route = useRoute();

const activeTopMenuLabel = computed(() => {
    for (const item of sideItems) {
        if (item.itemTitle) {
            for (const subItem of item.itemTitle) {
                if (subItem.index === route.path) {
                    return item.label;
                }
                if (subItem.childrenItemTitle) {
                    for (const child of subItem.childrenItemTitle) {
                        if (child.index === route.path) {
                            return item.label;
                        }
                    }
                }
            }
        }
    }
    return "";
});
let timer: number | NodeJS.Timeout | null = null;
const time = ref(formatDate(Date.now(), "YYYY-MM-DD HH:mm:ss"));

const iconWidth = '30px'
const iconHeight = '30px'


const isCollapse = ref(false);
const isShow = computed(() => !isCollapse.value);
const isClose = computed(() => isCollapse.value);


const factoryContainerStyle = computed(() => ({
    minWidth: isClose.value ? "63px" : "200px",
    transition: "min-width 0.4s  ease",
}));

const showSidebarStyle = computed(() => ({
    minWidth: isClose.value ? "53px" : "35px",
}));

function loginOut() {
    router.replace({ path: '/' });
}

function showSideBar() {
    isCollapse.value = !isCollapse.value;
}

onMounted(() => {
    timer = setInterval(() => {
        time.value = formatDate(Date.now(), "YYYY-MM-DD HH:mm:ss");
    }, 1000);
});
onBeforeUnmount(() => {
    if (timer !== null) {
        clearInterval(timer);
        timer = null;
    }
});


</script>
<style scoped lang='scss'></style>